<script setup>
const props = defineProps({
  pages: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <div class="article-index">
    <template v-for="page in pages" :key="page.chapter">
      <div class="section" v-if="page.chapter">
        <div class="chapter">
          <a :href="page.api" target="_blank">{{ page.chapter }}</a>
        </div>
        <ul class="list">
          <template v-for="article in page.articles" :key="article.url">
            <li class="item">
              <a class="title" :href="article.url" target="_blank">{{ article.title }}</a>
            </li>
          </template>
        </ul>
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
ul,
li {
  margin: 0;
  // padding: 0;
  list-style: none;
}
a {
  color: #5c8ec6;
  text-decoration: none;

  &:hover {
    color: #3451b2;
  }
}

.section {
  padding-bottom: 20px;
  border-top: 1px solid #dedede;
}
.chapter {
  font-weight: 700;
  line-height: 45px;

  a {
    color: #333;
    font-weight: bold;
    // text-decoration: underline;
  }
}

.list {
  .item {
    line-height: 30px;
  }
}
</style>
